import React, { useEffect, useState } from 'react'
import { FlatList, StyleSheet, TouchableOpacity, Text, View, Image, ImageBackground, ScrollView, Dimensions } from 'react-native';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { Divider } from '@rneui/themed';
import { Card, Button, Icon } from '@rneui/themed';
import { getCollection } from '../../api/order';
import axios from '../../api/axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

//传过来了userid
const CopyCollection = ({ navigation, route }) => {
    const { navigate } = navigation;
    //是否存在收藏？
    const [collectIs, setCollectIs] = useState('');
    //用于存放收藏列表数据
    const [collectionList, setCollectionList] = useState([]);
    //用于存放收藏的详情
    const [collect, setCollect] = useState([]);

    useEffect(() => {
        AsyncStorage.getItem('collect').then(
            data=>{
                if(data){
                    setCollectionList(data)
                } 
            }
        )
        //拉取数据库收藏夹表数据并存到collectionList中
        axios.post('/collection/all', {userid: userid}).then(res=>{
            console.log(res.data);
            setCollectionList(res.data)
            setCollectIs(res.msg);
            AsyncStorage.setItem('collect', JSON.stringify(res.data))
        })
        getCollection({ userid: route.params.userid })
            .then(res => {
                console.log(res.data);
                setCollectionList(res.data);
                setCollectIs(res.msg);
            })
    }, []);

    const listItems = collectionList.map(item => (
        <View style={styles.container}>
            <Card>
                <AntDesign name="star" size={24} color="black" style={{ position: 'relative', left: 0, top: 5 }} />
                <Text style={{ fontSize: 18, position: 'relative', left: 40, top: -20 }}>{item.collect_time}</Text>
                <Text style={{ color: '#BBBBBB', fontSize: 12, position: 'relative', left: 0, top: -10 }}>{item.userid}</Text>
                <Text style={{ alignItems: 'center', color: '#7BCBB8', fontSize: 17 }}>+10</Text>
                <AntDesign name="rightcircleo" size={24} color="black" onPress={() => navigation.navigate('collectioninfo', { collect_id: item.collect_id })} />
            </Card>
        </View>
    ))

    return <ScrollView>
        <View style={styles.con}>
            <View>
                <AntDesign name="folderopen" size={30} color="green" />
                <Text style={{ fontSize: 20, position: 'absolute', left: 40, top: 0, marginBottom: 10 }}>收藏夹</Text>
                <Divider style={{ marginTop: 10 }}></Divider>
            </View>
            <View style={styles.minicon}>
                {/* (
                {collectIs == 'collection' ? listItems : collectIs}
                ) */}
            </View>
        </View>
    </ScrollView>
}
const styles = StyleSheet.create({
    con: {
        padding: '4%',
        backgroundColor: '#fff',
        height: '100%'
    },
    minicon: {
        borderBottomWidth: 1,
        borderBottomColor: '#BBBBBB',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    leftcon: {
        alignItems: 'center'
    },
    container: {
        flex: 1,
    },
    fonts: {
        marginBottom: 8,
    },
    user: {
        flexDirection: 'row',
        marginBottom: 6,
    },
    image: {
        width: 30,
        height: 30,
        marginRight: 10,
    },
    name: {
        fontSize: 16,
        marginTop: 5,
    },
})

export default CopyCollection;